<template>
  <div>
    <div :class="loginContainer">
      <div class="login-register-bg">
        <div class="login-title">
          欢迎来到闲言博客
        </div>
        <div class="login-register-content">
          <a-menu v-model="current" mode="horizontal" @select="selectedKey">
            <a-menu-item key="login"> 登录 </a-menu-item>
            <a-menu-item key="register">注册</a-menu-item>
          </a-menu>
          <!--登录-->
          <div v-if="showLogin" class="login-info">
            <a-form
              id="components-form-demo-normal-login"
              :form="loginForm"
              class="login-form"
              @submit="handleSubmit"
            >
              <a-form-item>
                <a-input
                  v-decorator="[
                    'username',
                    { rules: [{ required: true, message: '请输入账号' }] },
                  ]"
                  placeholder="请输入账号"
                >
                  <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'password',
                    { rules: [{ required: true, message: '请输入密码' }] },
                  ]"
                  type="password"
                  placeholder="请输入密码"
                >
                  <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <!--<a-checkbox
                  v-decorator="[
                    'remember',
                    {
                      valuePropName: 'checked',
                      initialValue: true,
                    },
                  ]"
                >
                  记住我
                </a-checkbox>
                <a class="login-form-forgot" href="">
                  忘记密码
                </a>-->
                <a-button type="primary" html-type="submit" class="login-form-button">
                  登录
                </a-button>
              </a-form-item>
            </a-form>
            <div style="display: flex;justify-content: space-between">
              <div class="width:200px">
                <a href="http://www.likunkun.club/admin" target="_blank">去后台登录</a>
                <a href="http://www.likunkun.club/front" style="margin-left: 15px">去主页</a>
                <a href="javascript:;" style="margin-left: 15px" @click="changeImage">切换图片</a>
              </div>
              <img class="qq_login_img" src="../../assets/qq_login_white.png" height="24" width="76" alt="QQ登录" @click="qqLogin">
            </div>
          </div>
          <!--注册-->
          <div v-if="showRegister" class="register-info">
            <a-form :form="registerForm" @submit="handleRegisterSubmit">
              <a-form-item>
                <a-input
                  v-decorator="[
                    'username',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入账号'
                        },
                      ],
                    },
                  ]"
                  placeholder="请输入账号"
                >
                  <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'password',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入密码',
                        }
                      ],
                    },
                  ]"
                  placeholder="请输入密码"
                  type="password"
                >
                  <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'nickname',
                    {
                      rules: [{ required: true, message: '请输入昵称', whitespace: true }],
                    },
                  ]"
                  placeholder="请输入昵称"
                >
                  <a-icon slot="prefix" type="meh" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <!--邮件-->
              <a-form-item>
                <a-input
                  v-decorator="['userEmail',{rules: [{type: 'email',message: '邮件不合法',},{required: true,message: '请输入邮件'}]}]"
                  placeholder="请输入邮箱"
                >
                  <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-radio-group v-decorator="['sex',{rules:[{required:true,message:'请选择性别'}],initialValue:'1'}]">
                  <a-radio value="1">
                    男
                  </a-radio>
                  <a-radio value="0">
                    女
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" class="register-button">
                  注册
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { setToken } from '../../utils/auth'
import userApi from '@/api/myuser'
import md5 from 'js-md5'
export default {
  name: 'Index',
  data() {
    return {
      current: ['login'],
      showLogin: true,
      showRegister: false,
      loginForm: this.$form.createForm(this),
      registerForm: this.$form.createForm(this),
      loginContainer: 'login-container-bj7'
    }
  },
  beforeCreate() {
  },
  created() {
    this.loginContainer = this.randomImage()
  },
  methods: {
    randomImage() {
      return `login-container-bj${Math.floor(Math.random() * 7 + 1)}`
    },
    changeImage() {
      this.loginContainer = this.randomImage()
    },
    openWindow(url, width, height) {
      width = width || 600
      height = height || 400
      // const left = (window.screen.width - width) / 2
      // const top = (window.screen.height - height) / 2
      // window.open(url, '_blank', 'toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=' + left + ', top=' + top + ', width=' + width + ', height=' + height)
      window.location.href = url
    },
    qqLogin() {
      const qqAppId = '101934257' // 上面申请得到的appid
      const qqAuthPath = 'http://www.likunkun.club/front/#/qqauth' // 前面设置的回调地址
      const state = 'login_uiyuikjqytfgad' // 防止CSRF攻击的随机参数，必传，登录成功之后会回传，最好后台自己生成然后校验合法性
      // this.openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`)
      window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`
    },
    selectedKey(e) {
      console.log(e)
      if (e.key === 'login') {
        this.showLogin = true
        this.showRegister = false
      }
      if (e.key === 'register') {
        this.showRegister = true
        this.showLogin = false
      }
    },
    /* 验证重复密码*/
    handleConfirmBlur() {
    },
    /* 登录*/
    handleSubmit(e) {
      e.preventDefault()
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          values.password = md5(values.password)
          userApi.login(values).then(res => {
            if (res.code === 200) {
              this.$store.commit('SET_USER', res.data.user)
              setToken(res.data.token)
              this.$router.push('/')
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    /* 注册事件*/
    handleRegisterSubmit(e) {
      e.preventDefault()
      this.registerForm.validateFields((err, values) => {
        if (!err) {
          // 加密
          console.log(values)
          values.password = md5(values.password)
          userApi.register(values).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.showLogin = true
              this.showRegister = false
              const that = this
              setTimeout(() => {
                that.loginForm.setFieldsValue({ username: values.username })
              }, 200)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-menu-item{
    width: 50%;
    text-align: center;
  }
  .login-container-base{
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: skyblue;
    .login-register-bg{
      width: 450px;
      min-height: 450px;
      background-color: #ffffff;
      position: absolute;
      left: 84%;
      top: 50%;
      z-index: 100;
      transform: translate(-50%,-50%);
      padding:20px 40px 20px 40px;
      .login-title{
        line-height: 70px;
        text-align: center;
        font-size: 24px;
        color: #525252;
        font-weight: bold;
      }
      .qq_login_img{
        &:hover{
          cursor: pointer;
        }
      }
    }
    .login-register-content{
      width: 100%;
      .login-info,.register-info{
        width: 100%;
        margin-top: 30px;
      }
    }
  }
  .login-container-bj1{
    background-image: url('../../assets/loginbj/bj1.jpg');
    .login-container-base();
  }
  .login-container-bj2{
    background-image: url('../../assets/loginbj/bj2.jpg');
    .login-container-base();
  }
  .login-container-bj3{
    background-image: url('../../assets/loginbj/bj3.jpg');
    .login-container-base();
  }
  .login-container-bj4{
    background-image: url('../../assets/loginbj/bj4.jpg');
    .login-container-base();
  }
  .login-container-bj5{
    background-image: url('../../assets/loginbj/bj5.jpg');
    .login-container-base();
  }
  .login-container-bj6{
    background-image: url('../../assets/loginbj/bj6.jpg');
    .login-container-base();
  }
  .login-container-bj7{
    background-image: url('../../assets/loginbj/bj7.jpg');
    .login-container-base();
  }

  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }
  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }
  .register-button {
    width: 100%;
  }
</style>
